<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body a {
            text-decoration: none;
            color: #0d3a4b;
        }

        .active {
            color: #ffffff;
        }

        .wrap {
            width: 700px;
            height: 500px;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
            margin: 0 auto;
            position: relative;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 160px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody tr {
            background: #fff;
        }

        .ctrl {
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .ctrl div {
            width: 300px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;">年龄从小到大</a>
                <a href="javascript:;">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;">只显示男性</a>
                <a href="javascript:;">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>0</th>
                    <th>小明</th>
                    <th>24</th>
                    <th>男</th>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 数据优先 、数据驱动 
        let data = [
            {
                id: 1,
                name: '小明',
                age: 24,
                gender: '男'
            },
            {
                id: 2,
                name: '小芳',
                age: 30,
                gender: '女'
            },
            {
                id: 3,
                name: '小美',
                age: 31,
                gender: '女'
            },
            {
                id: 4,
                name: '小刚',
                age: 21,
                gender: '男'
            },
            {
                id: 5,
                name: '小琪',
                age: 18,
                gender: '女'
            }
        ];
        let ageIndex = 2;
        let genderIndex = 2;

        // 根据数据渲染视图
        function render(data) {
            let tbody = document.querySelector("tbody");
            tbody.innerHTML = "";
            data.forEach(item => {
                let tr = document.createElement("tr");
                tr.innerHTML = `<th>${item.id}</th>
                    <th>${item.name}</th>
                    <th>${item.age}</th>
                    <th>${item.gender}</th>`;
                tbody.appendChild(tr);
            })
        }
        render(data);

        // 年龄排序---》先搞定数据---》渲染视图
        // 年龄由小到大 
        // let f1 = function(data){
        //     return data.sort((r1,r2)=>{
        //         return  r1.age-r2.age;
        //     })
        // }
        // // 年龄由大到小
        // let f2 = function(data){
        //     return data.sort((r1,r2)=>{
        //         return  r2.age-r1.age;
        //     })
        // }
        // console.log(f2(data));
        let fn1 = data => data.map(item => item).sort((r1, r2) => r1.age - r2.age);
        let fn2 = data => data.map(item => item).sort((r1, r2) => r2.age - r1.age);
        let fn3 = data => data;
        // 年龄的排序规则 基于数据，先处理数据
        let ageSortArr = [fn1, fn2, fn3];
        let ageEles = document.querySelectorAll(".age_sort a");
        // 性别筛选规则
        let genderFilterArr = [data => data.filter(item => item.gender === "男"), data => data.filter(item => item.gender === "女"), data => data];
        let genderEles = document.querySelectorAll(".gender_show a");
        // console.log(ageEles);
        // 影响了原本的data ，引用 ---> 这次课之后的预习视频里有讲
        // 通过map复制了一份新的数据 
        ageEles.forEach((item, key) => {
            item.onclick = function () {
                ageEles.forEach(ele=>{
                    ele.classList.remove('active');
                })
                ageIndex = key;
                item.classList.add("active");
                // 处理数据
                let newData = ageSortArr[key](data);
                let res = genderFilterArr[genderIndex](newData);
                //   console.log(newData);
                // 渲染数据
                render(res);
            }
        })


        // 性别筛选点击按钮
        genderEles.forEach((item, key) => {
            item.onclick = function () {
                genderEles.forEach(ele=>{
                    ele.classList.remove('active');
                })
                item.classList.add("active");
                genderIndex = key;
                let newData = genderFilterArr[key](data);
                let res = ageSortArr[ageIndex](newData);
                // 渲染数据
                render(res);
            }
        })


    </script>
</body>

</html>